<template>
  <div class="height100 ls-flex ls-flex-unShrink">
    <div style="width: 250px;padding: 0.5em;box-sizing: border-box;border-right: var(--el-border-base)">
      <el-scrollbar>
        <div class="ls-text-halfLine" v-for="item in routes" :key="item.name">
          <router-link :to="item.path">
            {{ item.name }}
          </router-link>
        </div>
      </el-scrollbar>
    </div>
    <div class="ls-abs-outer appContainer ls-flexItem-grow">
      <router-view/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import setVersion from "./version";
import {routes} from "./router";

setVersion();

export default defineComponent({
  setup() {
    return {
      routes
    };
  }
})
</script>

<style>
html, body, #app {
  margin: 0;
  height: 100%;
}

#app {
  font-size: 14px;
  color: var(--el-text-color-primary);
}

.appContainer {
  overflow: hidden;
}
</style>